<style>
body {
    background-color: #fff;
}
.region.region-auction-shelf{
    background-color: #fff;
    padding: 15px;
    margin-top: 0px;
	padding-bottom: 0px;
}
.close_newuser_ins {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 26px;
    top: 26px;
	cursor:pointer;
}
.auction-pool {
    max-height: 440px;
    overflow: hidden;
	position:relative;
}
.auction-shelf-content{
	position:relative;
}
.auction-item.auction-item-home{
	margin-right:1px; 
}
.glyphicon-chevron-right:before ,.glyphicon-chevron-left:before {
    content: "";
}
.auction-pool-item{
	margin-left:15px;
}
.auction-item.auction-item-home{
	width:217px;
}
.auction-pool {
    max-width:930px;
}

.carousel-control .glyphicon-chevron-right {
    margin-right: 11px;
}
.region.region-auction-shelf .auction-shelf-header .auction-shelf-title {
    padding-left: 20px;
}
.auction-item.auction-item-home .auction-last-time {
  max-width: 112px;
}
.auction-item.auction-item-home .auction-winner .auction-winner-name {
  word-wrap: break-word;
}
</style>
<div style="padding:0px auto;" id="auction-showin-main">
        <div class="region region-auction-shelf shelf-home">
            <div class="auction-shelf-header">
                <h2 class="auction-shelf-title">Penny Auctions</h2>
            </div>
            <div class="auction-shelf-content" >
            <a class="left carousel-control"  href="javascript:void(0)"  role="button" data-slide="next" style="width:auto;">
                                    <span class="glyphicon glyphicon-chevron-left"  aria-hidden="true"><img src=""  pagespeed_url_hash="3283072350" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"></span>
                                    <span class="sr-only"></span>
                                </a>
            <?php  
                $this->widget('application.components.widgets.CAuctionsPool',array(
                    'id'            => 'featured-auction',
                    'shelfUrl'   =>Yii::app()->baseUrl."/ajax/shelfDataForFeature",
                    'dataProvider'  => $featureModel,
                    'template'      => '{items}',
                    'itemView'      => 'application.components.widgets.auctionPool.item._CAuctionItemMainsite'
                ))
        	?>
            <a class="right carousel-control"  href="javascript:void(0)" role="button"  data-slide="prev" style="width:auto;right:218px;">
                                          <span class="glyphicon glyphicon-chevron-right"  aria-hidden="true"><img src="" pagespeed_url_hash="1791100691" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"></span>
                                </a>
            </div>
			<div class="auction-shelf-footer helper-float-body" style="max-width: 905px;">
				<a href="http://pa.egunner.com?utm_source=egunnermain&utm_medium=iframe&utm_campaign=home" class="helper-float-right" style="color: #e41e28" target="_blank">View All Penny Auctions</a>
			</div>
        </div>
        <style>
            .auction-item.auction-item-home .auction-image-box {
                height: 168px;
                margin-right: 10px;
                display: table-cell;
                vertical-align: middle;
            }        
        </style>
</div>
<script>
	function AuctionsCarousel(){
    	this.defaultConfig={
        		pageSize:4,
        		page:1,
        		selector:"[auction-id]",
        		container:".auction-pool-item"
        };
    	var _this=this;
    	var _config={};
		var _auctionPool=[];
		this.operationType="next";
    	this.init=function(config){
    		_config=$.extend({},config,_this.defaultConfig);
    		return _this;
    	}
    	
    	this.allPageSize=function(){
            var length=$(_config["selector"]).length;
            return length;    
        }

        this.shortNum=function(){
            var all=_this.allPageSize();
            return all%_config["pageSize"];
        }

        this.next=function(){
            _this.fill();
            $(_config["selector"]+":lt("+_config["pageSize"]+")").appendTo($(_config["container"]));
        }

        this.prev=function(){
             _this.fill();
            $(_config["selector"]+":gt("+(_this.allPageSize()-_config["pageSize"]-1)+")").prependTo($(_config["container"])); 
        }

        /**
            page num is short,fill it 
        */
        this.fill=function(){
            var len=_this.shortNum();
            if(len>0){
                for(var i=0;i<(_config["pageSize"]-len);i++){
                    $(_config["selector"]+":lt(1)").clone(false).attr({"style":"visibility:hidden;"}).appendTo($(_config["container"]));
                }
            }
            return _this;
        }
    }
    
	$(document).ready(function(){
		var auctionCarousel=new AuctionsCarousel();
		auctionCarousel=auctionCarousel.init({})
		$(".left.carousel-control").on("click",function(){
			auctionCarousel.prev();
		})
		
		$(".right.carousel-control").on("click",function(){
			auctionCarousel.next();
		})
	})
	
	
</script>